<template>
  <page-frame>
    <div class="check01-in-main" style="vertical-align: top">
      <div class="toptitle">
        <div class="left">会员登记</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="submitForm">保&nbsp存</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="get_data" :rules="rules" ref="get_data" label-width="100px">
        <!--基本信息-->
        <div class="panel">
          <div class="panel-title">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">基本信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="性别">
                  <template>
                    <el-radio class="radio" v-model="radio" label="1">男</el-radio>
                    <el-radio class="radio" v-model="radio" label="2">女</el-radio>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="12"></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出生日期">
                  <el-date-picker
                    v-model="date"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12"></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="身份证号">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="固定电话">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="手机号">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="会员卡号">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="会员等级">
                  <el-select v-model="date" placeholder="请选择会员等级">
                    <!--<el-option-->
                    <!--v-for="item in options"-->
                    <!--:label="item.label"-->
                    <!--:value="item.value">-->
                    <!--</el-option>-->
                    <el-option value="普通">普通</el-option>
                    <el-option value="VIP">VIP</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="居住地址">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="户籍地址">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="籍贯">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="民族">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="政治面貌">
                  <el-select v-model="date" placeholder="请选择政治面貌">
                    <el-option value="中共党员">中共党员</el-option>
                    <el-option value="共青团员">共青团员</el-option>
                    <el-option value="群众">群众</el-option>
                    <el-option value="其他党派">其他党派</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="宗教信仰">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="婚姻状况">
                  <el-select v-model="date" placeholder="请选择婚姻状况">
                    <el-option value="单身">单身</el-option>
                    <el-option value="已婚">已婚</el-option>
                    <el-option value="离异">离异</el-option>
                    <el-option value="丧偶">丧偶</el-option>
                    <el-option value="其他">其他</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="文化程度">
                  <el-select v-model="date" placeholder="请选择文化程度">
                    <el-option value="博士">博士</el-option>
                    <el-option value="硕士">硕士</el-option>
                    <el-option value="本科">本科</el-option>
                    <el-option value="大专">大专</el-option>
                    <el-option value="中专和中技">中专和中技</el-option>
                    <el-option value="技工学校">技工学校</el-option>
                    <el-option value="高中">高中</el-option>
                    <el-option value="初中">初中</el-option>
                    <el-option value="小学">小学</el-option>
                    <el-option value="文盲与半文盲">文盲与半文盲</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--亲属信息-->
        <div class="panel">
          <div class="panel-title">亲属信息
            <el-button  class="fRight lightGreenBtn add" size="small" @click="leave=true">新增</el-button>
          </div>
          <div class="panel-content">
            <el-row>
              <el-col :span="22">
                <el-table
                  :data="tableData"
                  border
                  max-height="361">
                  <el-table-column
                    prop="name"
                    label="姓名">
                  </el-table-column>
                  <el-table-column
                    prop="phon"
                    label="性别">
                  </el-table-column>
                  <el-table-column
                    prop="role"
                    label="关系">
                  </el-table-column>
                  <el-table-column
                    prop="skill"
                    label="紧急联系人">
                  </el-table-column>
                  <el-table-column
                    prop="weixin"
                    label="微信号">
                  </el-table-column>
                  <el-table-column
                    prop="add"
                    label="通讯地址">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                  width="80">
                    <template scope="scope">
                      <el-button type="text" size="small" @click="delMember">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--其他-->
        <div class="panel">
          <div class="panel-title">其他</div>
          <div class="panel-content">
            <el-row>
              <el-col :span="22">
                <el-form-item label="兴趣爱好">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox label="阅读"></el-checkbox>
                    <el-checkbox label="体育"></el-checkbox>
                    <el-checkbox label="健身"></el-checkbox>
                    <el-checkbox label="写作"></el-checkbox>
                    <el-checkbox label="音乐"></el-checkbox>
                    <el-checkbox label="摄影"></el-checkbox>
                    <el-checkbox label="篮球"></el-checkbox>
                    <el-checkbox label="足球"></el-checkbox>
                    <el-checkbox label="排球"></el-checkbox>
                    <el-checkbox label="羽毛球"></el-checkbox>
                    <el-checkbox label="乒乓球"></el-checkbox>
                    <el-checkbox label="登山"></el-checkbox>
                    <el-checkbox label="自行车"></el-checkbox>
                    <el-checkbox label="唱歌"></el-checkbox>
                    <el-checkbox style="margin-left:0px;" label="美食/烹饪"></el-checkbox>
                    <el-checkbox label="绘画"></el-checkbox>
                    <el-checkbox label="书法"></el-checkbox>
                    <el-checkbox label="棋牌"></el-checkbox>
                    <el-checkbox label="旅游"></el-checkbox>
                    <el-checkbox label="舞蹈"></el-checkbox>
                    <el-checkbox label="钓鱼"></el-checkbox>
                    <el-checkbox label="跑步"></el-checkbox>
                    <el-checkbox label="乐器"></el-checkbox>
                    <el-checkbox label="其他"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="教育程度">
                  <div class="edu"><el-input v-model="input" placeholder="毕业院校"></el-input></div>
                  <div class="edu"><el-input v-model="input" placeholder="专业"></el-input></el-input></div>
                  <div class="edu"> <el-input v-model="input" placeholder="学位"></el-input></el-input></div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
              <el-form-item label="工作经历">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入工作经历"
                  v-model="textarea3">
                </el-input>
              </el-form-item>
            </el-col>
              <el-col :span="11">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入备注信息"
                  v-model="textarea3">
                </el-input>
              </el-form-item>
            </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <!--新增会员家属信息-->
      <el-dialog title="会员家属信息" v-model="leave" size="tiny" :close-on-click-modal="false">
        <el-form label-position="right" label-width="85px" :model="formLabelAlign">
          <el-form-item label="姓名">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
              <el-radio class="radio" v-model="radio" label="1">男</el-radio>
              <el-radio class="radio" v-model="radio" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="关系">
            <el-select v-model="option" placeholder="请选择关系">
              <el-option value="1">夫妻关系</el-option>
              <el-option value="2">父母子女关系</el-option>
              <el-option value="3">亲属关系</el-option>
              <el-option value="4">朋友关系</el-option>
              <el-option value="5">其他</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="是否是紧急联系人">
            <el-switch on-text="是" off-text="否" v-model="delivery"></el-switch>
          </el-form-item>
          <el-form-item label="居住地址">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="leave = false">取 消</el-button>
                <el-button type="primary" @click="leave = false">确 定</el-button>
              </span>
      </el-dialog>
    </div>
  </page-frame>
</template>


<script>
  export default {
    methods: {
      init(){
        this.loadTableData();
      },
      loadTableData(){

      },
      submitForm(){
        this.$router.push({name:"memberFile"});
      },
      onSubmit() {
        console.log('submit!');
      },
      query(){
      },
      back(){
        this.$router.push({name:"memberCheckIn"});
      },
      getServiceList(){

      },
      getOrgList(){

      },
      exportOrder(){

      },
      handleCurrentChange(val) {

      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData(this.queryData,val);
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        option:"1",
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },

        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        leave:false,
        queryData:{

        },
        tableData: [{
          name: '康熙',
          phon: '男',
          depart:'国防部',
          role:'夫妻关系',
          skill:'是',
          weixin:'15001706435',
          add:"上海市浦东新区张江镇盛夏路秋月路115号"
        }, {
          name: '乾隆',
          phon: '男',
          depart:'国防部',
          role:'夫妻关系',
          skill:'是',
          weixin:'15001706435',
          add:"上海市浦东新区张江镇盛夏路秋月路115号"
        }, {
          name: '雍正',
          phon: '男',
          depart:'国防部',
          role:'夫妻关系',
          skill:'是',
          weixin:'15001706435',
          add:"上海市浦东新区张江镇盛夏路秋月路115号"
        }, {
          name: '成吉思汗',
          phon: '男',
          depart:'国防部',
          role:'夫妻关系',
          skill:'是',
          weixin:'15001706435',
          add:"上海市浦东新区张江镇盛夏路秋月路115号"
        },{
          name: '康熙',
          phon: '男',
          depart:'国防部',
          role:'夫妻关系',
          skill:'是',
          weixin:'15001706435',
          add:"上海市浦东新区张江镇盛夏路秋月路115号"
        }, {
          name: '乾隆',
          phon: '男',
          depart:'国防部',
          role:'夫妻关系',
          skill:'是',
          weixin:'15001706435',
          add:"上海市浦东新区张江镇盛夏路秋月路115号"
        }, {
          name: '雍正',
          phon: '男',
          depart:'国防部',
          role:'夫妻关系',
          skill:'是',
          weixin:'15001706435',
          add:"上海市浦东新区张江镇盛夏路秋月路115号"
        }],
        radio:1,
        btnState:true,
        staffName:"方明",
        get_data:{
          serviceId: 1,
          serviceName: null,
          orgName: "贵柔",
          orgId:null,
          serviceOrgId:null,
          categoryName: "中医理疗",
          categoryId:1,
          attr:null,
          serviceSmIco: "",
          totalPrice: "",
          singlePrice:"",
          num:"",
          priceUnit:"/月",
          typeName: "体验包",
          serviceItemAnnexId: 0,
          serviceItemAnnexUrl: "string",
          serviceAttrAnnexId: 0,
          serviceAttrAnnexUrl: "string",
          typeId:2,
          serviceLabelList: [
            {
              serviceLabelId: 1,
              labelName: "测试1"
            },
            {
              serviceLabelId: 2,
              labelName: "测试2"
            }
          ]
        },
        imageUrl: '',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: true,
          type: [],
          resource: '',
          desc: '',
        },
        rules:{

        },
        serviceList:[{
          serviceId: null,
          serviceName: null
        }],
        serviceItem:'',
        serviceOrganization:'',
        date:'',
        daterange:'',
        total:1,
        pageData:[{
          currentPage1: 1,
        }],
        annexPhoto:{
          "annexId": 0,
          "annexName": "",
          "annexUrl": ""
        },
        annexPic:{
          "annexId": 0,
          "annexName": "",
          "annexUrl": ""
        }
      }
    }
  }
</script>
<style>

  .check01-in-main .title{
    font-size: 28px;
    color: #111111;
    margin: 30px 50px 30px 50px;
    font-weight:bolder;
    padding-left: 15px;
    border-left: 5px solid #0cb7c6;
  }
  .staff-container{
    width:80%;
    margin: 0 auto;

  }
  .el-tabs__item{
    font-weight: bolder;
    font-size:16px;
  }
  .el-form{
    width:80%;
    margin: 0 auto;
  }

  .el-col-12{
    position: relative;
  }
  .check01-in-main .btns{
    float: right;
  }
  .edu{
  display: inline-block;
  }
  .edu .el-input{
    width: 100% !important;
  }
  .el-input{
    width: 80%;
  }
  .input input{
    display: inline-block;
  }
  .el-icon-caret-top:before {
    content: "\E607"!important;
  }
  .el-select {
    display: block;
    position: relative;
  }
  .el-select .el-input .el-input__icon {
    top: 50%!important;
  }

  .fRight.add{
    margin-top: -2px;
  }
  .avatar-uploader{
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    top:5px;
    left: 120px;
    z-index: 5;
    height: 234px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 234px;
    line-height: 234px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 234px;
    display: block;
  }

</style>
